import { TabBar } from "antd-mobile"
import { useNavigate, useLocation } from "react-router-dom"
import IconFont from "../CustomIcon"
import { useEffect, useState } from "react"
import "./index.less"
const NavBar = () => {
  const tabs = [
    {
      key: "/",
      title: "账单",
      icon: <IconFont type="zhangdan" />,
    },
    {
      key: "/data",
      title: "统计",
      icon: <IconFont type="tongji" />,
    },
    {
      key: "/user",
      title: "我的",
      icon: <IconFont type="wode" />,
    },
  ]
  const navigate = useNavigate()

  const location = useLocation()

  const { pathname } = location

  const needNav = ["/", "/data", "/user"]

  const [showNav, setShowNav] = useState(false)

  useEffect(() => {
    // 设置导航栏的有无
    setShowNav(needNav.includes(pathname))
  }, [pathname])
  const setRouteActive = (value) => {
    navigate(value)
  }
  return (
    <TabBar
      style={{ display: showNav ? "block" : "none" }}
      activeKey={pathname}
      onChange={(value) => setRouteActive(value)}
      className="bottom2"
    >
      {tabs.map((item) => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  )
}

export default NavBar
